<template>
  <view class="container">
    <!-- 排行榜标签切换 -->
    <view class="rank-tabs">
      <view class="tab-item" :class="{ active: currentTab === 'highest' }" @click="switchTab('highest')">
        <text class="tab-text">最高分榜</text>
        <view class="tab-line" v-if="currentTab === 'highest'"></view>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 'lowest' }" @click="switchTab('lowest')">
        <text class="tab-text">最低分榜</text>
        <view class="tab-line" v-if="currentTab === 'lowest'"></view>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 'roast' }" @click="switchTab('roast')">
        <text class="tab-text">最毒舌榜</text>
        <view class="tab-line" v-if="currentTab === 'roast'"></view>
      </view>
    </view>

    <!-- 24小时数据展示 -->
    <view class="stats-cards">
      <view class="stats-card">
        <text class="stats-value">{{ topScore }}</text>
        <text class="stats-label">24h最高分</text>
        <view class="user-info">
          <image class="user-avatar" :src="topUser.avatar" mode="aspectFill"></image>
          <text class="user-name">{{ topUser.name }}</text>
        </view>
      </view>
      <view class="stats-card">
        <text class="stats-value">{{ totalUsers }}</text>
        <text class="stats-label">24h参与</text>
      </view>
      <view class="stats-card">
        <text class="stats-value">{{ avgScore }}</text>
        <text class="stats-label">平均分</text>
      </view>
    </view>

    <!-- 排行榜列表 -->
    <view class="rank-list">
      <view class="rank-item" v-for="(item, index) in rankList" :key="index" :class="{ 'top-three': index < 3 }">
        <!-- 排名 -->
        <view class="rank-number" :class="'rank-' + (index + 1)">
          <text>{{ index + 1 }}</text>
        </view>

        <!-- 用户信息 -->
        <view class="user-info">
          <image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
          <view class="user-detail">
            <text class="user-name">{{ item.name }}</text>
            <text class="user-tag">{{ item.tag }}</text>
          </view>
        </view>

        <!-- 分数 -->
        <view class="score-info">
          <text class="score">{{ item.score }}分</text>
          <text class="trend" :class="item.trend">{{
            item.trend === 'up' ? '↑' :
              item.trend === 'down' ? '↓' : '='
          }}</text>
        </view>

        <!-- 挑战按钮 -->
        <button class="challenge-btn" @click="handleChallenge(item)">
          <text class="icon">⚔️</text>
          <text>挑战</text>
        </button>
      </view>
    </view>

    <!-- 我的排名 -->
    <view class="my-rank">
      <view class="rank-number">
        <text>{{ myRank }}</text>
      </view>
      <view class="user-info">
        <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="user-detail">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-tag">{{ userInfo.tag }}</text>
        </view>
      </view>
      <view class="score-info">
        <text class="score">{{ userInfo.score }}分</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #F8F8F8;
  padding: 20rpx;
}

.rank-tabs {
  display: flex;
  justify-content: space-around;
  background: #FFFFFF;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;

  .tab-item {
    position: relative;
    padding: 20rpx 40rpx;

    &.active {
      .tab-text {
        color: #FF4785;
        font-weight: bold;
      }
    }

    .tab-text {
      font-size: 28rpx;
      color: #666;
    }

    .tab-line {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 6rpx;
      background: linear-gradient(135deg, #FF4785, #FF7B8C);
      border-radius: 3rpx;
    }
  }
}

.stats-cards {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;

  .stats-card {
    flex: 1;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 20rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .stats-value {
      font-size: 40rpx;
      font-weight: bold;
      color: #FF4785;
      display: block;
      margin-bottom: 10rpx;
    }

    .stats-label {
      font-size: 24rpx;
      color: #999;
    }

    .user-info {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10rpx;

      .user-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 20rpx;
        margin-right: 10rpx;
      }

      .user-name {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.rank-list {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 180rpx;

  .rank-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    margin-bottom: 20rpx; // 添加间距
    border-radius: 12rpx; // 添加圆角
    background: #F8F8F8; // 默认背景色

    &.top-three {
      position: relative;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

      &:nth-child(1) {
        background: linear-gradient(to right, rgba(255, 215, 0, 0.1), #FFFFFF);
        border: 2rpx solid rgba(255, 215, 0, 0.2);
      }

      &:nth-child(2) {
        background: linear-gradient(to right, rgba(192, 192, 192, 0.1), #FFFFFF);
        border: 2rpx solid rgba(192, 192, 192, 0.2);
      }

      &:nth-child(3) {
        background: linear-gradient(to right, rgba(205, 127, 50, 0.1), #FFFFFF);
        border: 2rpx solid rgba(205, 127, 50, 0.2);
      }
    }

    .rank-number {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: bold;

      &.rank-1 {
        color: #FFD700;
      }

      &.rank-2 {
        color: #C0C0C0;
      }

      &.rank-3 {
        color: #CD7F32;
      }
    }

    .user-info {
      flex: 1;
      display: flex;
      align-items: center;
      margin: 0 20rpx;

      .user-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        margin-right: 20rpx;
        border: 4rpx solid #FFFFFF;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
      }

      .user-detail {
        .user-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 6rpx;
        }

        .user-tag {
          font-size: 24rpx;
          color: #FF4785;
          background: rgba(255, 71, 133, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
        }
      }
    }

    .score-info {
      margin-right: 20rpx;
      text-align: right;

      .score {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-right: 10rpx;
      }

      .trend {
        font-size: 24rpx;

        &.up {
          color: #FF4785;
        }

        &.down {
          color: #666;
        }
      }
    }

    .challenge-btn {
      display: flex;
      align-items: center;
      gap: 8rpx;
      height: 56rpx; // 减小按钮高度
      line-height: 56rpx; // 调整文字垂直居中
      padding: 0 24rpx; // 调整水平内边距
      background: linear-gradient(135deg, #FF4D4D 0%, #F53D3D 100%);
      color: #FFFFFF;
      border: none;
      padding: 12rpx 28rpx;
      border-radius: 30rpx;
      font-size: 26rpx;
      font-weight: bold;
      box-shadow: 0 4rpx 12rpx rgba(255, 77, 77, 0.3);
      transition: all 0.3s;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 100%);
        transform: translateX(-100%);
        transition: transform 0.6s;
      }

      &:active {
        transform: scale(0.95);
        background: linear-gradient(135deg, #E63939 0%, #D92E2E 100%);

        &::before {
          transform: translateX(100%);
        }
      }

      .icon {
        font-size: 28rpx;
        margin-left: 4rpx;
      }
    }

  }
}

.my-rank {
  position: fixed;
  bottom: 100rpx; // 修改固定定位的底部距离，避免被tabbar遮挡
  left: 0;
  right: 0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 30rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);

  .rank-number {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #FF4785;
    font-weight: bold;
  }

  .user-info {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 20rpx;

    .user-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-right: 20rpx;
      border: 4rpx solid #FFFFFF;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .user-detail {
      .user-name {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }

      .user-tag {
        font-size: 24rpx;
        color: #FF4785;
        background: rgba(255, 71, 133, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
      }
    }
  }

  .score-info {
    .score {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}
.rank-list {
  .rank-item {
    padding: 32rpx 24rpx; // 增加上下内边距
    margin-bottom: 24rpx; // 增加项目间距
    
    .rank-number {
      width: 80rpx; // 增加排名数字区域宽度
      height: 80rpx; // 增加排名数字区域高度
      font-size: 36rpx; // 增加排名数字大小
    }
    
    .user-info {
      .user-avatar {
        width: 96rpx; // 增加头像尺寸
        height: 96rpx;
        border-radius: 48rpx;
      }
      
      .user-detail {
        .user-name {
          font-size: 32rpx; // 增加用户名字号
          margin-bottom: 12rpx; // 增加名字和标签间距
        }
        
        .user-tag {
          font-size: 26rpx; // 增加标签字号
          padding: 6rpx 16rpx; // 增加标签内边距
        }
      }
    }
    
    .score-info {
      .score {
        font-size: 36rpx; // 增加分数字号
      }
      
      .trend {
        font-size: 28rpx; // 增加趋势箭头字号
      }
    }
    
    .challenge-btn {
      height: 64rpx; // 增加按钮高度
      padding: 0 32rpx; // 增加按钮水平内边距
      font-size: 28rpx; // 增加按钮文字大小
      
      .icon {
        font-size: 32rpx; // 增加图标大小
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      currentTab: 'highest',
      topScore: 98,
      totalUsers: 1234,
      avgScore: 85,
      myRank: 99,
      topUser: {
        name: '时尚达人',
        avatar: '/static/default-avatar.png'
      },
      userInfo: {
        name: '我',
        avatar: '/static/default-avatar.png',
        score: 85,
        tag: '时尚新秀'
      },
      rankList: [
        {
          name: '时尚达人',
          avatar: '/static/default-avatar.png',
          score: 98,
          tag: '穿搭鬼才',
          trend: 'up'
        },
        {
          name: '穿搭小白',
          avatar: '/static/default-avatar.png',
          score: 95,
          tag: '时尚达人',
          trend: 'down'
        },
        {
          name: '毒舌王',
          avatar: '/static/default-avatar.png',
          score: 92,
          tag: '评论专家',
          trend: 'up'
        }
        // ... 可以添加更多数据
      ]
    }
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
      // TODO: 根据tab切换加载不同的排行榜数据
    },
    handleChallenge(item) {
      uni.navigateTo({
        url: `/pages/upload/upload?challengeId=${item.id}&challenger=${item.name}`
      })
    }
  }
}
</script>